<template>
  <div>
    <el-button type="primary" plain @click="onOpen">收藏这个商品</el-button>
    <el-dialog v-model="state.dialogVisible" title="收藏这个商品" width="600" :close-on-click-modal="false">
      <div>
        <el-form ref="submitListingFormRef" label-position="top" :model="submitListing">
          <el-form-item
            label="选择模板"
            prop="templateId"
            :rules="[
              {
                required: true,
                message: '请选择模板',
                trigger: 'change',
              },
            ]"
          >
            <el-select v-model="submitListing.templateId" placeholder="请选择模板">
              <el-option v-for="item in templateList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="产品型号名称"
                prop="modelName"
                :rules="[
                  {
                    required: true,
                    message: '请输入产品型号名称',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="submitListing.modelName" maxlength="100" show-word-limit placeholder="产品型号名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="产品型号"
                prop="modelNumber"
                :rules="[
                  {
                    required: true,
                    message: '请输入产品型号',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="submitListing.modelNumber" maxlength="100" show-word-limit placeholder="产品型号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="产品外部ID类型"
                prop="standardProductIdType"
                :rules="[
                  {
                    required: true,
                    message: '请选择产品外部ID类型',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select v-model="submitListing.standardProductIdType" placeholder="ENA/UPC/GTIN">
                  <el-option label="豁免" value="exemption" />
                  <el-option label="EAN" value="ean" />
                  <el-option label="UPC" value="upc" />
                  <el-option label="GTIN" value="gtin" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="submitListing.standardProductIdType !== 'exemption'"
                label="产品外部ID值"
                prop="standardProductIdValue"
                :rules="[
                  {
                    required: true,
                    message: '请输入产品外部ID值',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="submitListing.standardProductIdValue" maxlength="100" show-word-limit placeholder="产品外部ID值"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            label="产品描述"
            prop="description"
            :rules="[
              {
                required: true,
                message: '请输入产品描述',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              type="textarea"
              :rows="5"
              v-model="submitListing.description"
              maxlength="2500"
              show-word-limit
              placeholder="产品描述"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-popover
            title="验证结果"
            placement="top"
            trigger="click"
            :width="600"
          >
            <template #default>
              <el-table :data="issues">
                <el-table-column type="expand">
                  <template #default="{ row }">
                    <p class="text" v-text="row.message"></p>
                    <p class="text" v-text="row.attributeName"></p>
                  </template>
                </el-table-column>
                <el-table-column property="code" label="code" />
                <el-table-column label="severity">
                  <template #default="{ row }">
                    <el-tag :type="row.severity === 'ERROR' ? 'danger' : 'warning'" effect="dark">{{ row.severity }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template #reference>
              <el-button type="primary" plain @click="reqValidationPreview" :disabled="state.btnLoading" :loading="state.previewBtnLoading">验证属性</el-button>
            </template>
          </el-popover>
          <el-button type="primary" @click="reqPreSubmitListing" :disabled="state.previewBtnLoading" :loading="state.btnLoading">先收藏批量上传</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { listingTemplateNotPage, preSubmitListing } from '@/api/common'
import { ElMessage, FormInstance } from 'element-plus'
import { globalSubmitListingEvent } from '@/plugins/util/constants'
const submitListingFormRef = ref<FormInstance>()
const issues = ref<[]>()
const props = defineProps({
  productId: {
    type: String,
    default: '',
  },
})
const state = reactive({
  dialogVisible: false,
  previewBtnLoading: false,
  btnLoading: false,
})
const submitListing = reactive({
  templateId: '',
  description: '',
  modelName: '',
  modelNumber: '',
  standardProductIdType: 'exemption',
  standardProductIdValue: '',
})

const selectProductId = computed(() => {
  return props.productId
})

const templateList = reactive<any[]>([])
const reqListingTemplateNotPage = () => {
  listingTemplateNotPage().then((res: any) => {
    res.data.forEach((ite) => {
      templateList.push({
        value: ite.id,
        label: ite.name,
      })
    })
  })
}
const reqValidationPreview = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      if (!selectProductId.value) {
        ElMessage.error('商品数据丢失')
        return
      }
      state.previewBtnLoading = true
      issues.value = []
      preSubmitListing({
        productId: selectProductId.value,
        listingTemplateId: submitListing.templateId,
        validationPreview: true,
        productType: 'TABLE',
        ...submitListing,
      })
        .then((res) => {
          issues.value = res.data.issues
          onClose()
          ElMessage.success('操作成功')
        })
        .catch(() => {
          onClose()
        })
    }
  })
}

const reqPreSubmitListing = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      if (!selectProductId.value) {
        ElMessage.error('商品数据丢失')
        return
      }
      state.btnLoading = true
      preSubmitListing({
        productId: selectProductId.value,
        listingTemplateId: submitListing.templateId,
        ...submitListing,
      })
        .then((res) => {
          globalSubmitListingEvent.value = res.timestamp + ''
          onClose(true)
          ElMessage.success('操作成功')
        })
        .catch(() => {
          onClose()
        })
    }
  })
}

const onClose = (restForm = false) => {
  state.btnLoading = false
  state.previewBtnLoading = false
  if(restForm) {
    state.dialogVisible = false
    submitListingFormRef.value?.resetFields()
  }
}

const onOpen = () => {
  state.dialogVisible = true
}
onMounted(() => {
  reqListingTemplateNotPage()
})
</script>
<style scoped lang="scss"></style>
